<template>
  <div class="setting">
    <h3><i class="el-icon-back" @click="back"></i>&ensp;{{name}}</h3>
    <el-row :gutter="20">
      <el-col :span="24">
      <el-form ref="form" :model="form" label-width="100px" class="settingform">
        <el-row >
          <el-col :span="24">
            <el-form-item label="目标表">
            <!--链接id-->
           <input type="hidden" v-model="form.connId"/>
             <!-- 链接数据库-->
             <input type="hidden" v-model="form.srcDb"/>
            <!--原表名称 -->
            <input type="hidden" v-model="form.srcTable"/>
              <el-input type="text" :disabled="true"  v-model="form.tagTable" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="CRON表达式">
            <el-input type="text"  v-model="form.jobCron" placeholder="为空表示立即执行" ></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否压缩">
          <el-radio-group v-model="form.isParquet" @change="partition(form.isParquet)">
            <el-radio  label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分区设置">
          <el-radio-group v-model="form.isPartition" @change="partition(form.isPartition)">
            <el-radio  label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
        <el-form-item label="where 条件">
         <el-input type="text"  v-model="form.whereStr" ></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="8">
            
            <el-form-item label="指定分隔符">
              <el-input type="text"  v-model="form.fieldSep" placeholder="为空表示默认值\001"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="默认分区">
              <el-input type="text" :disabled="true" v-model="form.partitionKey" ></el-input>
          </el-form-item>
           
          </el-col>
        </el-row>
        </el-form>
      </el-col>
      <el-col :span="16">
         
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-table
          :data="form1.tableData1"
          @selection-change="changelist"
          style="width: 100%">
          <el-table-column
          label="源表字段"
          align="center"
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="filedName"
              label="源表字段"
              width="120">
            </el-table-column>
            <el-table-column
              prop="filedType"
              label="字段类型"
              width="80">
            </el-table-column>
            <el-table-column
              prop="filedComment"
              label="字段注释">
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="16">
         <el-table
          :data="form1.tableData2"
          style="width: 100%">
          <el-table-column
          label="新表字段"
          align="center"
          >
            <el-table-column
            prop="filedName"
            label="源表选中字段"
            width="120">
          </el-table-column>
          <el-table-column
            label="字段操作"
            width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="mini" v-model="scope.row.FiledOpera" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.FiledOpera }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="更改类型"
            width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="mini" v-model="scope.row.tagFiledType" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.tagFiledType }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="更改注释"
            width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="mini" v-model="scope.row.tagFiledComment" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.tagFiledComment }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            >
            <template slot-scope="scope">
              <el-button @click="scope.row.is_edit = true" type="text" size="small" v-if="scope.row.is_edit==false">编辑</el-button>
                <el-button v-if="scope.row.is_edit" @click="scope.row.is_edit = false" type="text" size="small">保存</el-button>
             
            </template>
          </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
      
    </el-row>
    <el-row>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-row>
    <!--<div class="addTime">
        设置定时:<a >添加</a>
        <el-ch  eckbox v-model="checked" class="isdisabled">禁用</el-ch>
      </div> -->
    <!-- <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="任务名称(job_原表名_用户id)"
        width="280">
      </el-table-column>
      <el-table-column
        prop="cron"
        label="任务cron表达式"
        >
      </el-table-column>
      <el-table-column
        prop="date"
        label="任务创建时间"
        width="120"
        >
      </el-table-column>
      
    </el-table> -->
  </div>
</template>

<script>
import {getMysqlsetting,subMysqlsetting} from "@/api/datalink"
export default {
  name: 'DecSetting',
   data () {
     const generateData2 = _ => {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
        return {
          list:[],
          data2: generateData2(),
          form:{
            isPartition:"0",
            partitionKey:"",
            fieldSep:"",
            isParquet:"0",
            srcTable:"源表表名",
            srcDb:"源表DB",
            connId:"连接id",
            tagDb:"目标表数据库",
            tagTable:"目标表名称",
            jobCron:"",
            whereStr:"1=1"
          },
          filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        },
            name:"",
            tableData: [{
            date: '2016-05-02',
            name: 'JOB名称[tmp_test_004]',
            cron: '28 51 11 01 08 ? 2018'
          }],
          form1:{
            list:[],
            tableData1:[
            {
              filedName:"5",
              filedType:"5",
              filedComment:"5",
            },
            {
              filedName:"6",
              filedType:"5",
              filedComment:"5",
            },
          ],
          tableData2:[]
          },
          
        }
    },
    mounted(){
        console.log(this.$route.query.row);
        this.name=this.$route.query.row.name;
        this.form.tagTable="tmp_"+this.name;
        this.form.srcTable=this.name;
        this.form.connId=this.$route.query.sqlId;
        this.form.srcDb=this.$route.query.dbname;
        this.getTables();
    },
   
    methods:{
      getTables(){
          getMysqlsetting(this.$route.query.sqlId,this.$route.query.dbname,this.name).then(res=>{
            console.log(res)
            if(res.data.errorNo=="0"){
              this.form1.tableData1=res.data.results
            }
          })
      },
       partition(data){
         console.log(data);
         if(data=="1"){
          this.form.PartitionFiled="DT分区"
        }else{
          this.form.PartitionFiled=""
        }
       },
       changelist(selection){
         console.log(selection);
         let arr=[]
         if(selection.length>0){
           for(var i=0;i<selection.length;i++){
             arr.push({
               filedName:selection[i].filedName,
               FiledOpera:selection[i].filedName,
               tagFiledType:selection[i].filedType,
               tagFiledComment:selection[i].filedComment,
               is_edit:true})
           }
         }
         this.form1.tableData2=arr;
       },
      back(){
        console.log(this.$store.state.formType.conType)
        this.$store.commit('changetab',{isSuccess:true,tabindex:1});
        this.$router.push({path:"/datalink/baselink/"+this.$store.state.formType.conType,query:{sqlType:this.$store.state.formType.conType,sqlId:this.$store.state.formType.id}})
      },
      onSubmit(){
        var data={
          form:this.form,
          table:this.form1.tableData2
        }
        subMysqlsetting(data).then(res=>{
          console.log(res);
          var result=res.data.errorMsg
          if(res.data.errorNo=="0"){

            this.$message({
                  message: result,
                  type: 'success'
                });
            this.$router.push({path:"/datalink/baselink/"+this.$store.state.formType.conType,query:{sqlType:this.$store.state.formType.conType,sqlId:this.$store.state.formType.id}})
          }else{
             this.$message.error(result);
          }
        })
      }
    }
}
</script>

<style scoped>
a{
    display: inline-block;
    text-decoration: none;
    color: blue;
}
.isdisabled{
   float: right;
}

.settingform .el-form-item{
  margin-bottom:8px;
}
</style>